﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Web site</title>
	<link href="CSSPositioning4Homework.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <div id="container">
        <div class="aside">
            <img src="imagesHomeSet.png" class="imageHome" alt="logo"/>
		    <h2 class="headerHome">HOME</h2>
		    <div class="menu1">
			    <h3 class="headerRedText">CSS Basic</h3>
			    <ul class="menu1LinkText">
				<li>
					<a href="#">CSS Introduction</a>
				</li>
			</ul>
			    <ul class="menu1LinkText">
				<li>
					<a href="#">CSS Syntax</a>
				</li>
			</ul>
			    <ul class="menu1LinkText">
				<li>					
					<a href="#">CSS How To</a>
				</li>
			</ul>
			    <ul class="menu1LinkText">
				<li>					
					<a href="#">CSS Background</a>
				</li>
			</ul>
			    <ul class="menu1LinkText">
				<li>					
					<a href="#">CSS Text</a>
				</li>
			</ul>
			    <ul class="menu1LinkText">
				<li>					
					<a href="#">CSS Font</a>
				</li>
			</ul>
			    <ul class="menu1LinkText">
				<li>					
					<a href="#">CSS Border</a>
				</li>
			</ul>
			    <ul class="menu1LinkText">
				<li>					
					<a href="#">CSS Outline</a>
				</li>
			</ul>
			    <ul class="menu1LinkText">
				<li>					
					<a href="#">CSS Margin</a>
				</li>
			</ul>
			    <ul class="menu1LinkText">
				<li>					
					<a href="#">CSS Padding</a>
				</li>
			</ul>
			    <ul class="menu1LinkText">
				<li>					
					<a href="#">CSS List</a>
				</li>
			</ul>
			    <ul class="menu1LinkText">
				<li>					
					<a href="#">CSS Table</a>
				</li>
			</ul>				
		    </div>
		    <div class="menu2">
			    <h3 class="headerRedText">CSS Advanced</h3>
			    <ul class="menu2LinkText">
				<li>
					<a href="#">CSS Dimension</a>
				</li>
			</ul>
			    <ul class="menu2LinkText">
				<li>
					<a href="#">CSS Classification</a>
				</li>
			</ul>
			    <ul class="menu2LinkText">
				<li>					
					<a href="#">CSS Positioning</a>
				</li>
			</ul>
			    <ul class="menu2LinkText">
				<li>					
					<a href="#">CSS Pseudo-class</a>
				</li>
			</ul>
			    <ul class="menu2LinkText">
				<li>					
					<a href="#">CSS Pseudo-element</a>
				</li>
			</ul>
			    <ul class="menu2LinkText">
				<li>					
					<a href="#">CSS Image Gallery</a>
				</li>
			</ul>
			    <ul class="menu2LinkText">
				<li>					
					<a href="#">CSS Image Opacity</a>
				</li>
			</ul>
			    <ul class="menu2LinkText">
				<li>					
					<a href="#">CSS Media Types</a>
				</li>
			</ul>
			    <ul class="menu2LinkText">
				<li>					
					<a href="#">CSS Don't</a>
				</li>
			</ul>
			    <ul class="menu2LinkText">
				<li>					
					<a href="#">CSS Summary</a>
				</li>
			</ul>				
		    </div>		
		    <div class="menu3">
			    <h3 class="headerRedText">CSS Examples</h3>
			    <ul class="menu3LinkText">
				<li>
					<a href="#">CSS Examples</a>
				</li>
			</ul>
		    </div>
		    <div class="menu4">
			    <h3 class="headerRedText">References</h3>
			    <ul class="menu4LinkText">
				<li>
					<a href="#">CSS2 Reference</a>
				</li>
			</ul>
			    <ul class="menu4LinkText">
				<li>
					<a href="#">CSS2 Print</a>
				</li>
			</ul>
			    <ul class="menu4LinkText">
				<li>
					<a href="#">CSS2 Aural</a>
				</li>
			</ul>
			    <ul class="menu4LinkText">
				<li>
					<a href="#">CSS Units</a>
				</li>
			</ul>	
			    <ul class="menu4LinkText">
				<li>
					<a href="#">CSS Colors</a>
				</li>
			</ul>
			    <ul class="menu4LinkText">
				<li>
					<a href="#">CSS Colorvalues</a>
				</li>
			</ul>
			    <ul class="menu4LinkText">
				<li>
					<a href="#">CSS Colornames</a>
				</li>
			</ul>			
		    </div>
		    <div class="menu5">
			    <h3 class="headerRedText">CSS Quiz</h3>
			    <ul class="menu5LinkText">
				<li>
					<a href="#">CSS Quiz</a>
				</li>
			</ul>
			    <ul class="menu4LinkText">
				<li>
					<a href="#">CSS Exam</a>
				</li>
			</ul>
		    </div>
        </div>		
        <div class="rightBar">
		    <div class="rightBarN">
			    <div id="grеyTitleBar1">SITE SEARCH</div>
                <div id="form">
                    <form>
			            <input type="text" name="textBox" class="textBox" required="true" />
			            <input type="image" src="imageButtonRight.png" class="imageButtonRight" name="imageButtonRight"/>
                    </form>  
                </div>
			    <ul>
                    <li>
                        <a href="#">About W3Schools</a>
                    </li>
                </ul>
                <ul>
                    <li>
			            <a href="#">W3Schools Forum</a>		
                    </li>
                </ul>           			
		    </div>
		    <div class="rightBarN">
			    <input type="image" src="imageButton25PlusStyles.png" id="imageButton25PlusStyles" name="imageButton25PlusStyles" value="imageButton25PlusStyles" alt="imageButton25PlusStyles" />
			    <!--label for="imageButton25PlusStyles" class="labelImageButton25PlusStyles"></label--> 	
                <ul>
                    <li>			    
                        <a href="#">Dynamic button image generation</a>	
                    </li>
                </ul>   		
		    </div>
		    <div class="rightBarN">
			    <div id="grеyTitleBar2">WEB HOSTING</div>
                <ul>
                    <li>
			            <a href="#">$15 Domain Name</a>	
                    </li>
                </ul>
                <ul>
                    <li>                        	
			            <a href="#">Registration</a>
                    </li>
                </ul>
                <ul>
                    <li>
			            <a href="#">Save $20 / year!</a>	
                    </li>
                </ul>			
		    </div>	
		    <div class="rightBarN">
                <ul>
                    <li>
                        <a href="#">UK Domain Names</a>	
                    </li>
                </ul>	
                <ul>
                    <li>
                        <a href="#">UK Web Hosting</a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="#">Alojamiento Web</a>	
                    </li>
                </ul>			
		    </div>
		    <div class="rightBarN">
                <ul>
                    <li>
                        <a href="#">Buy UK Domain Names</a>	
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="#">Register Domain Names</a>
                    </li>
                </ul>
		    </div>	
		    <div class="rightBarN">
                <ul>
                    <li> 
                        <a href="#">Cheap Domain Names</a>	
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="#">Cheap Web Hosting</a>	
                    </li>
                </ul>
		    </div>	
		    <div class="rightBarN">
                <ul>
                    <li>
                        <a href="#">Best Web Hosting</a>	
                    </li>
                </ul>
		    </div>
		    <div class="rightBarN">
                <ul>
                    <li>    
                        <a href="#">Domain Name</a>	
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="#">Registration</a>	
                    </li>
                </ul>		
		    </div>
		    <div class="rightBarN">
                <ul>
                    <li>
                        <a href="#">PHP MySQL Hosting</a>	
                    </li>
                </ul>				
		    </div>
		    <div class="rightBarN">
                <ul>
                    <li>
                        <a href="#">Top 10 Web Hosting</a>	
                    </li>
                </ul>				
		    </div>
		    <div class="rightBarN">
                <ul>
                    <li>
                        <a href="#">Web Hosting Providers</a>	
                    </li>
                </ul>				
		    </div>
		    <div class="rightBarN">
                <ul>
                    <li>
                        <a href="#">Web Hosting Company</a>		
                    </li>
                </ul>			
		    </div>
		    <div class="rightBarN">
                <ul>
                    <li>
                        <a href="#">Web Hosting Reviews</a>
                    </li>
                </ul>				
		    </div>
		    <div class="rightBarN">
                <ul>
                    <li>
                        <a href="#">UK Web Hosting</a>
                    </li>
                </ul>					
		    </div>
        </div>
		<div class="section">
			<div class="sectionButtonsTop">
				<h1 class="h1">CSS Tutorial</h1>
				<input type="image" src="buttonPrevious.png" id="buttonPrevious1" name="buttonPrevious1" value="buttonPrevious1" alt="buttonPrevious1" />
				<!--label for="buttonPrevious1" class="labelButtonPrevious1"></label-->
				<input type="image" src="buttonNext.png" id="buttonNext1" name="buttonNext1" value="buttonNext1" alt="buttonNext1" />
				<!--label for="buttonNext1" class="labelButtonNext1"></label--> 					
			</div>
			<div>
				<div class="grеyTitleBarLeftTextAlign">CSS Tutorial</div>
				<img src="imagesCSS.png" class="imageCSS" alt="logo"/>
				<p class="boldTextSection">
					Save a lot of work with CSS!
                </p>
                <p class="boldTextSection">
					In our CSS tutorial you will learn how to use CSS to control the style and layout of multiple Web pages all at once.
				</p>
				<a href="#">Start learning CSS!</a>
			</div>
			<div>
				<div class="grеyTitleBarLeftTextAlign">CSS Examples</div>
				<p>Learn by 70 examples! With our editor, you can edit CSS, and click on a test button to view the result.</p>
				<a href="#">Try-It-Yourself!</a>
			</div>
			<div>
				<div class="grеyTitleBarLeftTextAlign">CSS Reference</div>
				<p>At W3Schools you will find a complete CSS2 reference, listing properties, units of measurements, colors, and more.</p>
				<a href="#">CSS2 Reference</a>
			</div>
			<div>
				<div class="grеyTitleBarLeftTextAlign">CSS Quiz Test</div>
				<p>Test your CSS skills at W3Schools!</p>
				<a href="#">Start CSS Quiz!</a>
			</div>
			<div class="sectionButtonsBottom">
				<input type="image" src="buttonPrevious.png" id="buttonPrevious2" name="buttonPrevious2" value="buttonPrevious2" alt="buttonPrevious2" />
				<!--label for="buttonPrevious2" class="labelButtonPrevious2"></label-->
				<input type="image" src="buttonNext.png" id="buttonNext2" name="buttonNext2" value="buttonNext2" alt="buttonNext2" />
				<!--label for="buttonNext2" class="labelButtonNext2"></label--> 	
			</div>
		</div>		
	</div>
</body>
</html>